<template>
    <div class="UnitManage">

        <HouseLeftNavigation :navList="navList.data" :defaultClick="navList.defaultClick"
            :myStyle="{ width: '130px', height: '100%' }" @returnData="setPage"></HouseLeftNavigation>
        <div class="right">
            <div class="top">
                <div>{{defaultClick}}{{$t("text.House.l99")}}</div>
                <DialogLayout28 isHouse @returnData="returnData">
                    <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;">{{
                        $t('text.Neighbourhoods.l22') }}</el-button>
                </DialogLayout28>
            </div>
            <div class="um1">
                <div class="um2" @mouseenter="onMouseEnter(index)" @mouseleave="onMouseLeave(index)"
                    v-for="(item, index) in dataList" v-bind:key="item">
                    <div class="um3">
                        <CommonImage class="umi4" :src="item.pictureAddress"/>
                    </div>
                    <div class="um4">
                        <div class="um5" style="position: relative;">
                            <div>
                                {{ item.name }} &emsp;
                                <span class="tag1" v-if="item.saleStatus == $t('text.DialogLayout.l78')">{{
                                    $t('text.DialogLayout.l78')
                                }}</span>
                                <span class="tag2" v-if="item.saleStatus == $t('text.DialogLayout.l79')">{{
                                    $t('text.DialogLayout.l79')
                                }}</span>
                                <span class="tag3" v-if="item.saleStatus == $t('text.DialogLayout.l80')">{{
                                    $t('text.DialogLayout.l80')
                                }}</span>
                            </div>
                            <div>
                                <DialogLayout28 isHouse isDetele :dataList="item" @updateData="updateData" :index="index"
                                    @deleteData="deleteData">
                                    <img src="../../assets/images/h40.svg" style="width: 18px;height: 18px;position: absolute;top: 3px;"  v-if="isonMouse && mouseIndex == index">
                                </DialogLayout28>
                            </div>
                        </div>
                        <div class="um6">
                            <div class="um7">
                                <div class="um8">
                                    {{ item.roomNumber + $t('text.DialogLayout.l91') }}
                                    {{ item.parlorNumber == null ? 0 + $t('text.DialogLayout.l92') : item.parlorNumber +
                                        $t('text.DialogLayout.l92') }}
                                    {{ item.toiletNumber == null ? 0 + $t('text.DialogLayout.l93') : item.toiletNumber +
                                        $t('text.DialogLayout.l93') }}
                                </div>
                                <div class="um9">{{ $t('text.Neighbourhoods.l68') }}</div>
                            </div>
                            <div class="um7">
                                <div class="um8">{{ item.area }}m²</div>
                                <div class="um9">{{ $t('text.Neighbourhoods.l69') }}</div>
                            </div>
                            <div class="um7">
                                <div class="um8">{{ item.toward == "" ? '-' : item.toward }}</div>
                                <div class="um9">{{ $t('text.Neighbourhoods.l70') }}</div>
                            </div>
                        </div>
                        <div class="um10">
                            {{ item.depict == "" ? '-' : item.depict }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script>

import { modelList } from '../../http/api'

export default {
    components: {
    },
    props: {
    },
    data() {
        return {
            navList: {
                defaultClick: this.$t('text.Neighbourhoods.l17'), data: [
                    { name: this.$t('text.Neighbourhoods.l17'), img: require('../../assets/images/extend.svg'), count: 0 },
                    { name: this.$t('text.Neighbourhoods.l18'), img: require('../../assets/images/extend.svg'), count: 2 },
                    { name: this.$t('text.Neighbourhoods.l19'), img: require('../../assets/images/extend.svg'), count: 3 },
                    { name: this.$t('text.Neighbourhoods.l20'), img: require('../../assets/images/extend.svg'), count: 1 },
                    { name: this.$t('text.Neighbourhoods.l21'), img: require('../../assets/images/extend.svg'), count: 0 },
                ]
            },
            dataList: [],
            isonMouse: false,
            mouseIndex: 0,
            roomNumber:1,
            defaultClick:this.$t('text.Neighbourhoods.l17')
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        onMouseEnter(index) {
            this.isonMouse = true
            this.mouseIndex = index
        },

        getData() {
            modelList({ moduleType: "新房", refId: this.$route.query.id, roomNumber: this.roomNumber }).then(res => {
                if (res !== undefined) {
                    this.dataList = res
                    console.log(res)
                }
            }).catch()
        },

        setPage(index){
            this.roomNumber=index+1
            this.defaultClick=this.navList.data[index].name
            this.getData()
        },

        onMouseLeave(index) {
            this.isonMouse = false
            this.mouseIndex = index
        },
        returnData() {
            //this.dataList.push(params)
            //插入后后端没有返回id，所以只能重新请求
            this.getData()
        },
        updateData(params, index) {
            
            this.dataList[index] = params
        },
        deleteData(index) {
            this.dataList.splice(index, 1)
            console.log(this.dataList)
        }

    },
    watch: {
    },
    computed: {
    }

}
</script>
    
<style scoped>
.tag1 {
    background-color: #ec808d;
    color: white;
    font-size: 12px;
    padding: 3px 5px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.tag2 {
    background-color: #02bfbf;
    color: white;
    font-size: 12px;
    padding: 3px 5px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.tag3 {
    background-color: #f59b22;
    color: white;
    font-size: 12px;
    padding: 3px 5px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.UnitManage {
    width: 100%;
    height: 100%;
    display: flex;
}

.right {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-right: 15px;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
}

.um1 {
    display: flex;
    flex-wrap: wrap;
    padding-left: 40px;
    justify-content: space-between;
}

.um2 {
    display: flex;
    width: 48%;
    padding-bottom: 20px;
}

.um3 {
    width: 250px;
    height: 180px;
    border: 1px solid #eee;
}

.umi4 {
    width: 250px;
    height: 180px;
}

.um4 {
    height: 180px;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0 15px;
    font-size: 13px;
    flex: 1;
}

.um5 {
    color: #6698ff;
    font-size: 17px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.um6 {
    display: flex;
    padding-bottom: 10px;
    align-items: center;
    gap: 10px;
}

.um7 {
    flex: 1;
}

.um8 {
    font-size: 14px;
    color: black;
    font-weight: 600;
    white-space: nowrap;
}

.um9 {
    font-size: 12px;
    color: black;
    white-space: nowrap;
}

.um10{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
</style>